<template>

  <div>
    
    <div class='top-left'>
    
    <el-button type="primary" @click="openEditUI" class="rounded-button" icon="el-icon-plus">点击申请</el-button>
    

<!-- 奖学金申请框  -->
    <el-dialog @close="clearForm" title="奖学金申请功能" :visible.sync="dialogVisible">
      <el-form :model="schoInfoform">

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="schoInfoform.stuName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth">
          <el-input type="passwd"  v-model="schoInfoform.passwd" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item label="申请人姓名" prop="name">
          <el-input v-model="fixedName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请人年级" prop="grade">
          <el-input v-model="fixedGrade" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请人学号" prop="studentId">
          <el-input v-model="fixedStudentId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请奖学金类型" prop="scholarshipType" class="center">
          <el-select v-model="schoInfoform.scholarshipType" placeholder="请选择申请奖学金类型" style="width: 120%;">
            <el-option label="国家奖学金" value="first"></el-option>
            <el-option label="市级奖学金" value="second"></el-option>
            <el-option label="校级奖学金" value="third"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveScho" >确 定</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog
      title="奖学金申请表"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      class="rounded-dialog">
      <el-form ref="form" :model="schoInfoform" label-width="100px" :rules="rules">
         <el-form :model="schoInfoform" label-width="100px">
        
        <el-form-item label="申请人姓名" prop="name">
          <el-input v-model="fixedName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        

        <el-form-item label="申请人年级" prop="grade">
          <el-input v-model="fixedGrade" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请人学号" prop="studentId">
          <el-input v-model="fixedStudentId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="申请奖学金类型" prop="scholarshipType">
          <el-select v-model="schoInfoform.scholarshipType" placeholder="请选择申请奖学金类型" style="width: 100%;">
            <el-option label="国家奖学金" value="first"></el-option>
            <el-option label="市级奖学金" value="second"></el-option>
            <el-option label="校级奖学金" value="third"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!form.scholarshipType" @click="submitForm">提 交</el-button>
      </span>
    </el-dialog> -->
  </div>
  </div>
</template>

<script>
import schoInfoApi from '@/api/schoInfo'
export default {
  name: "shengqin",
  data() {
    return {
      dialogVisible: false,
      schoInfoform: {
        scholarshipType: ''
      },
      rules: {
        scholarshipType: [
          { required: true, message: '请选择申请奖学金类型', trigger: 'change' }
        ]
      },
      fixedName: '麻炳昌', // 设置固定的申请人姓名
      fixedGrade: '研一', // 设置固定的申请人年级
      fixedStudentId: '2022082110' // 设置固定的申请人学号
    };
  },
  methods: {
    clearForm(){
      this.schoInfoform = {};
      
    },
    saveScho(){
      //触发表单验证
      this.$refs.schoInfoform.validate(valid => {
        if (valid) {
          //提交请求给后台
          schoInfoApi.addSchoInfo(this.schoInfoform).then(Response => {
            //成功提示
            this.$notify({
              title: '成功',
              message: '申请已成功提交',
              dialogVisible : false,
              type: 'success',
              duration: 2000 // 设置通知显示时间为 2 秒
            });
            //关闭对话框
            this.dialogVisible = false;
            //刷新表格
            
          });
        } else {
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
          return false;
        });
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$confirm('确认提交申请吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.dialogVisible = false;
            console.log('Form data:', this.form);
            this.$notify({
              title: '成功',
              message: '申请已成功提交',
              dialogVisible : false,
              type: 'success',
              duration: 2000 // 设置通知显示时间为 2 秒
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        } else {
          return false;
        }
      });
    },
    openEditUI(){
      //根据stuId查询用户
      this.dialogVisible = true;
      
    }
  }
};
</script>

<style>
.top-left {
  /* position: relative; */
  top: -10px; /* 向上微调10像素 */
  right: -20px; /* 向右微调10像素 */
}

.rounded-button {
  border-radius: 10px; /* 设置按钮的圆角大小 */
}

.rounded-dialog {
  border-radius: 10px; /* 设置对话框的圆角大小 */
}

.dialog-footer .el-button {
  border-radius: 10px; /* 设置对话框内按钮的圆角大小 */
}

.el-dialog .el-input{
  width: 85%
}
.center {
  display: flex;
  justify-content: center;
}
</style>
